var dom = document.getElementById('weather-left3');
var myChart = echarts.init(dom, null, {
  renderer: 'canvas',
  useDirtyRect: false
});

var app = {};

var option;
//R:弧度=角度/180*Math*PI
// 基于准备好的dom，初始化echarts实例
var data = [
    [
        '2017-01-04 08:00',
        6.19,
        0.7853
    ],
    [
        '2017-01-05 08:00',
        6.19,
        0.2303
    ],
    [
        '2017-01-06 08:00',
        3.19,
        0
    ],
    [
        '2017-01-07 08:00',
        6.19,
        0
    ],
    [
        '2017-01-08 08:00',
        6.19,
        4
    ],
    [
        '2017-01-09 08:00',
        11.19,
        2
    ],
    [
        '2017-01-10 08:00',
        17.19,
        4.7124
    ]
];
//数据参数顺序
var dims = {
    time: 0,
    windSpeed: 1,
    R: 2
};
//箭头大小
var arrowSize = 12;
//方向绘制
function renderArrow(param, api) {
    var point = api.coord([
        api.value(dims.time),
        api.value(dims.windSpeed)
    ]);

    return {
        type: 'path',
        shape: {
            pathData: 'M31 16l-15-15v9h-26v12h26v9z',
            x: -arrowSize / 2,
            y: -arrowSize / 2,
            width: arrowSize,
            height: arrowSize
        },
        rotation: api.value(dims.R),
        position: point,
        style: api.style({
            stroke: '#555',
            lineWidth: 1
        })
    };
}

var option = {
    title: {
        text: '风速风向分析图',
        textStyle: {
			    fontSize:22,
			    fontWeight: 'bold',
		},
        left: 'center',
        top:'1.5%'
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            return [
                // echarts.format.formatTime('yyyy-MM-dd', params[0].value[dims.time])
                // + ' ' + echarts.format.formatTime('hh:mm', params[0].value[dims.time]),
                '时间：' + params[0].value[dims.time],
                '风速：' + params[0].value[dims.windSpeed],
                '风向：' + params[0].value[dims.R]
            ].join('<br>');
        }
    },
    grid: {
        top: 40,
        bottom: 60
    },
    xAxis: {
        type: 'time'
    },
    yAxis: [{
        name: '风速（节）',
        nameLocation: 'middle',
        nameGap: 35,
        axisLine: {
            lineStyle: {
                color: '#666'
            }
        },
        splitLine: {
            lineStyle: {
                color: '#ddd'
            }
        }
    }, {
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: { show: false },
        splitLine: { show: false }
    }],
    visualMap: {
        type: 'piecewise',
        orient: 'horizontal',
        left: 'center',
        bottom: 10,
        pieces: [{
            gte: 17,
            color: '#D33C3E',
            label: '大风（>=17节）'
        }, {
            gte: 11,
            lt: 17,
            color: '#f4e9a3',
            label: '中风（11  ~ 17 节）'
        }, {
            lt: 11,
            color: '#18BF12',
            label: '微风（小于 11 节）'
        }],
        seriesIndex: 0,
        dimension: 1
    },
    dataZoom: [{
        type: 'inside',
        xAxisIndex: 0,
        minSpan: 5
    }],
    series: [{
        type: 'custom',
        renderItem: renderArrow,
        encode: {
            x: dims.time,
            y: dims.windSpeed
        },
        data: data,
        z: 10
    }, {
        type: 'line',
        symbol: 'none',
        encode: {
            x: dims.time,
            y: dims.windSpeed
        },
        lineStyle: {
            normal: {
                color: '#aaa',
                type: 'dotted'
            }
        },
        data: data,
        z: 1
    }]
};


if (option && typeof option === 'object') {
  myChart.setOption(option);
}

window.addEventListener('resize', myChart.resize);